<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React demo首页</title>
    <link rel="stylesheet" href="../css/base.css" />

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script src="../js/moment.min.js"></script>
    <link rel="stylesheet" href="../css/antd.css" />
    <script src="../js/antd.js"></script>
</head>

<body>
    <div id="example"></div>

    <script type="text/babel">
        // 引入antd UI框架的组件
        const { Input, Space, Button, Carousel, Row, Col } = antd;

        // 页面样式定义
        const contentStyle = {
            height: '100%',
            color: '#fff',
            lineHeight: '100%',
            textAlign: 'center',
            background: '#364d79',
        };
        const Top_Style = {
            maxWidth: '540px',
            margin: '0 auto',
            position: 'relative'
        }
        const sear_input = {
            width: '50vw',
            borderRadius: 20,
            background: '#fafafa',
            opacity: 0.6
        }

        // 轮播图列表
        const CarouselList = [
            {
                url: 'http://img.pyw.cn/issue_activity/20190227/320c01dd09d4064d0054b5507ac53141.jpg',
                name: 'wap-剑侠棋缘'
            },
            {
                url: 'http://img.pyw.cn/issue_activity/20190227/320c01dd09d4064d0054b5507ac53141.jpg',
                name: 'wap-剑侠棋缘'
            },
            {
                url: 'http://img.pyw.cn/issue_activity/20190227/320c01dd09d4064d0054b5507ac53141.jpg',
                name: 'wap-剑侠棋缘'
            },
            {
                url: 'http://img.pyw.cn/issue_activity/20190227/320c01dd09d4064d0054b5507ac53141.jpg',
                name: 'wap-剑侠棋缘'
            },
            {
                url: 'http://img.pyw.cn/issue_activity/20190227/320c01dd09d4064d0054b5507ac53141.jpg',
                name: 'wap-剑侠棋缘'
            },
        ]
        // 循环列表代码，直接插入下面代码即可：例如{img_listItems}
        const img_listItems = CarouselList.map((item, index) =>
            <div key={index}>
                <img src={item.url} alt={item.name} width="100%"/>
            </div>
        )

        // 热门游戏列表
        const gameList = [
            {
                img_url: 'http://img.pyw.cn/g/4/604/525e77b6c85f001bad0057e7a696e3bb.png',
                game_name: '天堂2：血盟',
                game_info: '超燃万人血盟阵营站震撼开启'
            },
            {
                img_url: 'http://img.pyw.cn/g/4/604/525e77b6c85f001bad0057e7a696e3bb.png',
                game_name: '天堂2：血盟',
                game_info: '超燃万人血盟阵营站震撼开启'
            },
            {
                img_url: 'http://img.pyw.cn/g/4/604/525e77b6c85f001bad0057e7a696e3bb.png',
                game_name: '天堂2：血盟',
                game_info: '超燃万人血盟阵营站震撼开启'
            },
            {
                img_url: 'http://img.pyw.cn/g/4/604/525e77b6c85f001bad0057e7a696e3bb.png',
                game_name: '天堂2：血盟',
                game_info: '超燃万人血盟阵营站震撼开启'
            },
            {
                img_url: 'http://img.pyw.cn/g/4/604/525e77b6c85f001bad0057e7a696e3bb.png',
                game_name: '天堂2：血盟',
                game_info: '超燃万人血盟阵营站震撼开启'
            },
            {
                img_url: 'http://img.pyw.cn/g/4/604/525e77b6c85f001bad0057e7a696e3bb.png',
                game_name: '天堂2：血盟',
                game_info: '超燃万人血盟阵营站震撼开启'
            },
        ]
        // 循环列表代码，直接插入下面代码即可：例如{game_listItems}
        const game_listItems = gameList.map((item, index) =>
            <Col className='whi-bg border game-li' span={8} key={index}>
                <a href="" className='a-game'>
                    <img src={item.img_url} alt="" />
                    <h3 className='game-name'>{item.game_name}</h3>
                </a>
                <p className='game-info'>{item.game_info}</p>
            </Col>
        )

        // 游戏类型列表
        const gametypeList = ['新游推荐', '潮流口袋必备', '单机游戏', '热门游戏']
        // 循环列表代码，直接插入下面代码即可：例如{gametype_items}
        const gametype_items = gametypeList.map((item, index) =>
            <div className='whi-bg game-list' key={index}>
                <div className='game-head'>
                    <div><i className='v-line'></i>{item}</div>
                    <div>{'更多  >'}</div>
                </div>
            </div>
        )

        // 页面内容
        class Content extends React.Component {
            // 设置组件传参
            constructor(props) {
                super(props);
                this.onChange = this.onChange.bind(this);
                this.onSearch = this.onSearch.bind(this);
            }
            // 函数方法：轮播图变动触发事件
            onChange(a, b, c) {
                console.log(a, b, c);
            }
            // 函数方法：点击搜索事件
            onSearch(value) {
                console.log(value);
            }

            render() {
                return (
                    <div style={Top_Style}>
                        {/* 头部搜索  goScroll为true向下滚动头部搜索背景改变为黄色，反之false不改背景*/}
                        <div id='head-box' className={this.props.goScroll?'head-box head-box-yello':'head-box'}>
                            <div>
                                <a href="#" >
                                    <img src="http://pyw.cn/wap/images/logo.png" alt="" />
                                </a>
                            </div>
                            <Space direction="vertical" style={{ padding: '0 .4rem' }}>
                                <Input placeholder="" onClick={this.onSearch} bordered={false} style={sear_input} />
                            </Space>
                            <div className='head-login'>
                                <a href="#">
                                    <span className='i-48 i-user'></span>
                                </a>
                            </div>
                        </div>
                        {/* 轮播图 */}
                        <Carousel afterChange={this.onChange} autoplay>
                            {img_listItems}
                        </Carousel>
                        {/* 全部游戏 */}
                        <div className='notice-more'>
                            <div>全部游戏</div>
                            <div>{'>'}</div>
                        </div>
                        {/* 热门游戏头部 */}
                        <div className='whi-bg game-list'>
                            <div className='game-head'>
                                <div><i className='v-line'></i>充值钜惠</div>
                                <div>{'更多  >'}</div>
                            </div>
                        </div>
                        {/* 热门游戏列表 */}
                        <Row gutter={[0, 0]}>
                            {game_listItems}
                        </Row>
                        {/* 中间插图片 */}
                        <a href="">
                            <img className='game-list' src="http://img.pyw.cn/issue_activity/20201103/8f741528e9c4da6fd50ab54021ee4006.png" alt="" width='100%'/>
                        </a>
                        {/* 游戏类型列表 */}
                        {gametype_items}
                        {/* 底部 */}
                        <div className='footer-box'>
                            <a href="https://v.pinpaibao.com.cn/authenticate/cert/?site=pyw.cn&amp;at=business" target="_blank">
                                <img className='game-list' src="http://static.anquan.org/static/outer/image/hy_124x47.png?id=pyw.cn?t=37" alt="安全联盟认证" width="124" height="47" />
                            </a>
                            <ul>
                                <li><a>下载客户端</a></li>
                                <li className='li-border'><a>关于我们</a></li>
                                <li><a>联系客服</a></li>
                            </ul>
                            <p>©广州朋友玩网络科技有限公司  版权所有</p>
                            <p><a href="http://www.beian.miit.gov.cn/">粤ICP备13067565号</a></p>
                            <p>公司电话： 020-87698773</p>
                            <p>公司地址：广州市天河区建中路66号佳都商务大厦西塔9楼 </p>
                        </div>
                    </div>
                );
            }
        }

        // 父组件，负责所有的状态、操作、引入
        class PageIndex extends React.Component {
            // 设置组件传参
            constructor(props) {
                super(props);
                // goScroll 是否向下滚动
                this.state = { goScroll: false };
                this.bindHandleScroll = this.bindHandleScroll.bind(this);
            }
            //在componentDidMount():第一次渲染后调用，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理
            componentDidMount() {
                window.addEventListener('scroll', this.bindHandleScroll)
            }
            //在componentWillUnmount:移除之前立刻被调用，进行scroll事件的注销
            componentWillUnmount() {
                window.removeEventListener('scroll', this.bindHandleScroll);
            }
            bindHandleScroll(event) {
                // 滚动的高度
                const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)
                    || window.pageYOffset
                    || (event.srcElement ? event.srcElement.body.scrollTop : 0);
                console.log(scrollTop);
                // 如果滚动高度大于10，就判断向下滚动为true，反之为false
                if( scrollTop > 10 ){
                    this.setState({goScroll:true})
                }else{
                    this.setState({goScroll:false})
                }
            }

            render() {
                var goScroll_Value = this.state.goScroll
                return (
                    <Content goScroll={goScroll_Value}></Content>
                );
            }
        }

        // 触发
        ReactDOM.render(
            <PageIndex />,
            document.getElementById('example')
        )

    </script>

</body>

</html>